<template>
	<view class="model">
		<view class="main">
			<view class="detail">
				<span>请设置</span>
				<view class="box">
					<input type="number" placeholder="设置保留佣金百分比" v-model="proportion" />
				</view>
				<span>%</span>
			</view>
			<view class="word">
				<view>
					温馨提示 :
				</view>
				<view>
					百分比差价是指您从夏季发展的订单中获得的利
				</view>
				<view>
					润百分比。
				</view>
				<view>
					1 、假设您的收入佣金为 <span>100</span>元,您设置了一个
				</view>
				<view>
					<span>10%</span>的百分比差价.这意味着,每当您的下级发
				</view>
				<view>
					展一个订单时,您将保留该订单利润的 <span>10%</span>,也
				</view>
				<view>
					就是 <span>10元</span>作为您的佣金。
				</view>
				<view>
					2 、比例设置后,每次新增的商品,将按照您设置
				</view>
				<view>
					的保留比例自动计算出您给到您下级的佣金,自
				</view>
				<view>
					动上架;
				</view>
				<view>
					3 、比例只能设置 <span>0~25%</span>;
				</view>
			</view>
			<view class="title">{{ titleWord }}</view>
			<u-button type="primary" shape="circle" @click="save" class="mysave">保存</u-button>
		</view>
	</view>
</template>

<script>
	import {
		setCommissionRatio
	} from "@/apis/ratio.js"
	import {
		mapState
	} from 'vuex'
	export default {
		name: "Model",
		data() {
			return {
				proportion: '',
				titleWord: '',
				ceshiData: ''
			};
		},
		// computed: {
		// 	...mapState(['dataFromApi'])
		// },

		methods: {
			// ...mapActions(['getUserInfo']),
			async save() {
				if (this.proportion === '') {
					this.titleWord = '请输入佣金比例';
					return;
				}
				if (isNaN(this.proportion)) {
					this.titleWord = '请输入0到25的整数';
					return;
				}
				if (this.proportion > 25 || this.proportion < 0) {
					this.titleWord = '比例只能设置0~25%';
					return;
				}
				setCommissionRatio(this.proportion)
					.then((res) => {
						if (res.code == 200) {
							this.$emit("firstLogin")
						} else {
							this.titleWord = res.msg;
						}
					})
				// const ceshi = await this.$store.dispatch("getUserInfo", this.proportion)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.model {
		width: 750rpx;
		height: 100vh;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		background-color: rgba(51, 51, 51, 0.60);
		padding: 370rpx 40rpx 0 40rpx;
		box-sizing: border-box;

		.main {
			width: 100%;
			height: 900rpx;
			background-color: white;
			border-radius: 30rpx;
			padding: 80rpx 80rpx 0 80rpx;
			box-sizing: border-box;
			position: relative;

			.detail {
				width: 100%;
				height: 75rpx;
				display: flex;
				overflow: hidden;
				margin-bottom: 50rpx;

				span {
					color: red;
					font-size: 25rpx;
					margin-right: 25rpx;
					margin-top: 12rpx;

					&:nth-of-type(2) {
						color: black;
						margin: 0;
						font-size: 26rpx;
					}
				}

				.box {
					height: 100%;
					width: 74%;
					border-bottom: 1rpx solid gray;

					input {
						width: 100%;
						height: 80%;
					}
				}
			}

			.word {
				font-size: 23rpx;
				color: #1975F2;
				letter-spacing: 1.5rpx;
				margin-bottom: 40rpx;

				span {
					color: red;
				}

				view {
					margin-bottom: 10rpx;
				}
			}

			.title {
				width: 100%;
				color: red;
				text-align: center;
				font-size: 25.5rpx;
				margin-bottom: 55rpx;
			}

			.mysave {
				width: 510rpx;
				position: absolute;
				bottom: 60rpx;
			}
		}
	}
</style>